分享人:肖浩宇
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
所有支持Javascript的浏览器都会使用同源策略这个安全策略。导致我们无法直接访问非同源的链接,无法取得非同源的数据,但在项目中我们的数据经常写在另一个源中,于是我们需要突破同源限制,取得其他源的数据,这就叫跨域。
A.html
B.js
//调用callback函数,并以json数据形式作为阐述传递,完成回调
callback({message:"success"});
结果会alert“success”,这就是jsop的基本原理
优点:兼容性很好好,可以在古老的浏览器中运行,
缺点:它只支持GET请求而不支持POST等其它类型的HTTP请求。
jsonp和ajax有什么关系?
ajax是通过操作XMLHttpRequest对象发送请求,获取返回的数据。JSONP的全称为JSON with Padding,Padding 指的就是包裹在JSON 外层的回调函数。从刚才的例子中,咱们发现JSONP并没有操作XMLHttpRequest,因此jsonp和ajax没有任何关系。
前端代码:
$.ajax({
url: "http://tonghuashuo.github.io/test/jsonp.txt",
dataType: 'jsonp',
jsonp: "callback",
jsonpCallback: "dosomething"
})
.done(function(res) {
console.log("success");
console.log(res);
})
.fail(function(res) {
console.log("error");
console.log(res);
});
这里使用了ajax这个方法,但实际上jsonp和ajax没有任何关系,只是因为jsonp请求和ajax请求相似,jquery在这里有误导之嫌。
参考一:跨域资源共享 CORS 详解
参考二:5 分钟彻底明白 JSONP
BY : 肖浩宇